<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .box button {
            width: 100px;
            height: 50px;
        }

        .content {
            width: 150px;
            height: 150px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。 -->
        <button @click="count++">加 1</button>
        <!-- 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。 -->
        <button @click="btnClick">减 1</button>

        <!-- 事件传参，直接在函数后面添加参数即可 -->
        <button @click="addNum(10,$event)">加指定数</button>

        <h1> {{ count }} </h1>


        <hr>


        <!-- 修饰符 -->

        <!-- .self 当事件发生在当前元素的时候才会触发处理函数，事件发生在内部将不做处理 -->
        <!-- <div class="box" @click.self="boxClick"> -->

        <!-- .capture 触发内部事件的时候，先执行外部事件处理函数 -->
        <!-- <div class="box" @click.capture="boxClick"> -->

        <div class="box" @click="boxClick">

            <!-- .stop s是修饰符，该修饰符是用来阻止冒泡用的 -->
            <!-- <button @click.stop="btnClick2">内部按钮</button> -->

            <!-- .prevent 该修饰符是用来阻止默认事件用的 -->
            <!-- <a href="https://www.baidu.com" @click.prevent="btnClick2">内部按钮</a> -->

            <!-- .once 设置事件触发只会执行一次，一次后将不再被执行(该事件是一次性的) -->
            <!-- <button @click.once="btnClick2">内部按钮</button> -->

            <button @click="btnClick2">内部按钮</button>
        </div>


        <div @scroll.passive="onScroll" class="content">
            2024年部分节假日安排已经正式公布，快来看看你关心的假期安排。这次国务院办公厅
            发布的放假安排，涵盖了一整年的重要节日和假期，从元旦、春节、清明节、劳动节
            、端午节、中秋节到国庆节，让你提前做好规划和准备。
            2024年部分节假日安排已经正式公布，快来看看你关心的假期安排。这次国务院办公厅
            发布的放假安排，涵盖了一整年的重要节日和假期，从元旦、春节、清明节、劳动节
            、端午节、中秋节到国庆节，让你提前做好规划和准备。
            2024年部分节假日安排已经正式公布，快来看看你关心的假期安排。这次国务院办公厅
            发布的放假安排，涵盖了一整年的重要节日和假期，从元旦、春节、清明节、劳动节
            、端午节、中秋节到国庆节，让你提前做好规划和准备。
            2024年部分节假日安排已经正式公布，快来看看你关心的假期安排。这次国务院办公厅
            发布的放假安排，涵盖了一整年的重要节日和假期，从元旦、春节、清明节、劳动节
            、端午节、中秋节到国庆节，让你提前做好规划和准备。
        </div>


        <!-- 键盘修饰符 -->
        <input @keyup.enter="submit" />

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                count: 100
            }
        },
        methods: {
            btnClick() {
                this.count--
            },
            addNum(num, e) {
                this.count += num

                // event 不需要在函数中进行接收，也可以正常使用
                console.log(e);
            },
            boxClick() {
                console.log('外部 box 被点击了');
            },
            btnClick2() {
                console.log('内部 btn 被点击了');
            },
            onScroll() {
                console.log('滚动了');
            },
            submit() {
                console.log('表单可以提交了');
            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>